<template>
<!-- 248, 248, 248 -->
  <div class="content-box">
    <van-nav-bar
      style="background-color: #f8f8f8;"
      title="社保卡领卡/激活网点查询"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="main-box">
      <div class="person-info">
        <div class="person">
          <p>刘晓晓</p>
          <p style="margin-top: 10px;">440223199652455541</p>
        </div>
        <div class="address">
          <div class="a-right">
            <div style="float: left;">
              <van-field
                label-width="40%"
                readonly
                clickable
                placeholder="选择地区"
                :value="value"
                name="参保地"
                label="参保地"
                :colon="true"
                input-align="left"
                @click="showPicker = true"
              />
              <span class="arrow"></span>
              <van-popup v-model="showPicker" position="bottom">
                <van-picker
                  show-toolbar
                  :columns="columns"
                  @confirm="onConfirm"
                  @cancel="showPicker = false"
                />
              </van-popup>
              <!-- <van-dropdown-menu>
                <van-dropdown-item v-model="value1" :options="option1" />
              </van-dropdown-menu> -->
            </div>
          </div>
        </div>
      </div>
      <div class="info">
        <div class="info-box">
          <van-collapse v-model="activeName" accordion>
            <div class="list" v-for="(item, index) in listData" :key="index" >
              <van-collapse-item :title="item.year" :name="item.year">
                <div class="detail" v-for="(val,ind) in item.contentData" :key="ind">
                  <!-- {{val.lastTime}}
                  <div>{{val.company}}</div> -->
                  <van-cell center is-link :title="val.company" :value="val.money" :label="val.lastTime" />
                </div>
              </van-collapse-item>
            </div>
          </van-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'searchCard',
  data () {
    return {
      columns: ['广州市', '东莞市', '佛山市', '深圳市'],
      showPicker: false,
      listData: [{
        year: '2019年',
        contentData: [{
          company: '老百姓大药房连锁广东有限公司',
          money: 111.52,
          lastTime: '2月15日'
        }, {
          company: '老百姓大药房连锁广东有限公司',
          money: 123.52,
          lastTime: '2月15日'
        }]
      }, {
        year: '2020年',
        contentData: [{
          company: '老百姓大药房连锁广东有限公司',
          money: 123.52,
          lastTime: '2月15日'
        }, {
          company: '老百姓大药房连锁广东有限公司',
          money: 123.52,
          lastTime: '2月15日'
        }]
      }, {
        year: '2021年',
        contentData: [{
          company: '老百姓大药房连锁广东有限公司',
          money: 123.52,
          lastTime: '2月15日'
        }, {
          company: '老百姓大药房连锁广东有限公司',
          money: 123.52,
          lastTime: '2月15日'
        }]
      }, {
        year: '2022年',
        contentData: [{
          company: '老百姓大药房连锁广东有限公司',
          money: 123.52,
          lastTime: '2月15日'
        }, {
          company: '老百姓大药房连锁广东有限公司',
          money: 123.52,
          lastTime: '2月15日'
        }]
      }],
      activeName: '2022年',
      value1: 0,
      option1: [
        { text: '广州市', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      value: ''
    }
  },
  methods: {
    onConfirm (value) {
      this.value = value
      this.showPicker = false
    },
    onClickLeft () {
      console.log('neiogn')
    }
  }
}
</script>

<style lang="less" scoped>
.content-box{
  min-height: 100vh;
  background-color: #f8f8f8;
  .person-info{
    margin: 0 2px;
    display: flex;
    height: 80px;
    font-size: 14px;
    background-color: #1769ff;
    color: #fff;
    .person{
      flex: 1;
      padding: 15px 0 20px 20px;
    }
    .address{
      display: flex;
      flex: .8;
      .a_left{
        flex: .6;
        text-align: right;
        line-height: 80px;
      }
      .a-right{
        position: relative;
        flex: 1;
        margin-top: 15px;
        height: 50%;
        .arrow{
          position: absolute;
          top: 50%;
          right: 8%;
          display: inline-block;
          width: 0;
          height: 0;
          border-right: 5px solid transparent;
          border-left: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-top: 5px solid #fff;
        }
      }
      .a-right /deep/ .van-cell{
        background-color: #1769ff;
      }
      .a-right /deep/ .van-field__label{
        color: #fff;
      }
      .a-right /deep/ .van-field__control{
        color: #fff;
      }
      .a-right /deep/ .van-cell::after{
        border: 0;
      }
      .a-right /deep/ .van-dropdown-menu .van-dropdown-menu__bar{
        background-color: #1769ff;
      }
      .a-right /deep/ .van-dropdown-menu .van-dropdown-menu__bar .van-dropdown-menu__title{
        color: #fff;
      }
    }
  }
  .info{
    .info-box{
      margin: 0 3%;
      .list{
        margin-top: 10px;
        padding: 5px;
        border-radius: 5px;
        background-color: #fff;
        .detail /deep/ .van-cell__title{
          flex: 3.2;
        }
        .detail /deep/ .van-cell__value{
          color: #3e7ef6;
        }
      }
    }
  }
}
</style>
